---
import BaseHead from "../../components/BaseHead.astro";
import MySearch from "../../components/MySearch.vue";
import Tab from "./tab.vue";
import MyNav from "../../components/MyNav.astro";
import ArticleList from "./articleList.vue";
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";

let allPosts = (await Astro.glob("../posts/*.md")) as any;
const pageTitle = "TA 的博客";
const tab_title = [
  "HTML",
  "CSS",
  "JS",
  "Vue",
  "React",
  "JAVA",
  "Go",
  "Node",
  "astro",
  "MongoDB",
  "Git",
];

const { posts } = Astro.props;
if (posts) {
  allPosts = posts;
}
export const prerender = true;
---

<link rel="stylesheet" href="/iconfont/iconfont.css" />

<html lang="en">
  <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  <body class="bg-blue_bg">
    <MyNav />
    <div class="w-[50vw] m-auto">
      <MySearch color="#fff" client:load />
    </div>
    <div class="mt-[100px] mb-1">
      <Tab tablist={tab_title} client:load />
    </div>
    <layoutsMd title={pageTitle}>
      <div class="m-auto w-[70vw] px-6">
        <ArticleList allPosts={allPosts} client:load />
      </div>
    </layoutsMd>
  </body>
</html>
